<div class="po-tabs-container">
  <div #containerTabs class="po-tabs-header">
    <div class="po-tabs-button-wrapper" role="tablist">
      <ng-container *ngFor="let tab of tabs; trackBy: trackByFn">
        <po-context-tab-button
          *ngIf="!tab.removed"
          #tabButton
          class="po-tab-button"
          [class.po-tab-button-aa]="size === 'small'"
          [p-active]="tab.active"
          [p-disabled]="tab.disabled"
          [p-show-tooltip]="tab.showTooltip"
          [p-hide]="tab.hide"
          [p-id]="tab.id"
          [hidden]="tab.hide"
          [p-hide-close]="tab.hideClose"
          [attr.disabled]="tab.disabled"
          [p-label]="tab.label"
          [p-literals]="literals"
          [id]="tab.id"
          (keyup.enter)="closeListbox()"
          (p-activated)="onTabActive(tab)"
          (p-change-state)="onTabChangeState(tab)"
          (p-change-visible)="onChangeVisibilityTab(tab)"
          (p-click)="selectedTab(tab)"
          (p-close)="closeTab(tab)"
        >
        </po-context-tab-button>
      </ng-container>

      <po-tab-dropdown
        #tabDropdown
        *ngIf="isShowTabDropdown"
        class="po-tab-dropdown"
        [class.po-tab-dropdown-device]="!tabsDefault?.length"
        [p-label]="literals.moreTabs"
        [p-size]="size"
        [p-tabs]="overflowedTabs"
        (p-change-state)="onTabChangeState($event)"
        (p-click)="onTabActiveByDropdown($event)"
      >
      </po-tab-dropdown>
    </div>
  </div>
</div>
<div class="po-tabs-content">
  <ng-content></ng-content>
</div>
